import type { App, Directive, DirectiveBinding } from 'vue'

import { useUserStore } from '@/store'

const Permission: Directive = {
  mounted(el: Element, binding: DirectiveBinding<any>) {
    const userStore = useUserStore()

    const permission = binding.value

    if (!permission) return

    if (userStore.permissions.includes('*:*:*')) return

    if (!userStore.permissions.includes(permission)) {
      el.parentNode?.removeChild(el)
    }
  }
}

export function usePermission(app: App) {
  app.directive('permission', Permission)
}

export default Permission
